<template>
  <div>
    <el-dialog
      :title="dialogInfo.isAdd ? '添加活动' : '编辑活动'"
      :visible.sync="dialogInfo.isShow"
      :before-close="cancel"
      center 
      @opened="openEvent"
    >
    
      <el-form :model="seckInfo" :rules="rules" ref="seckInfo">
        <el-form-item
          label="活动名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="活动期限"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="一级分类"
          :label-width="formLabelWidth"
          prop="first_cateid"
        >
          <el-select
            @change="changeCate(false)"
            v-model="seckInfo.first_cateid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in secklist"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="二级分类"
          :label-width="formLabelWidth"
          prop="second_cateid"
        >
          <el-select v-model="seckInfo.second_cateid" placeholder="请选择">
            <el-option
              v-for="item in secondArr"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item
          label="商品"
          :label-width="formLabelWidth"
          prop="goodsid"
        >
          <el-input v-model="seckInfo.goodsid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="seckInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//引入封装好的接口
import { getSeckAdd, getSeckInfo, getSeckEdit } from "../../request/api";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      seckInfo: {
        first_cateid: "", //一级分类编号
        second_cateid: "", //二级分类编号
        id:0,  //编号，必填项
        title:"",  //限时秒杀名称
        begintime:"",  //开始时间
        endtime:"",  //结束时间
        goodsid:"",  //商品编号
        status: 1, //状态1正常2禁用
      },
      formLabelWidth: "120px", //label宽度
      //规则验证
      rules: {
        title: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        // first_cateid: [
        //   { required: true, message: "请选择一级分类", trigger: "change" },
        // ],
        // second_cateid: [
        //   { required: true, message: "请选择二级分类", trigger: "blur" },
        // ],
        // specsid: [
        //   { required: true, message: "请选择商品规格", trigger: "change" },
        // ],
        // specsattr: [
        //   { required: true, message: "请选择规格属性", trigger: "blur" },
        // ],
      },
      //二级分类数组
      secondArr: [],
      //定义规格属性值数组
      specsArr: [],
    };
  },
  computed: {
    ...mapGetters({
      secklist: "seck/getSeckList",
      // specslist: "specs/getSpecsList",
    }),
  },
  mounted() {
    //组件一加载就调用活动接口
    if (this.secklist.length == 0) {
      this.getSeck();
    }
    // if (this.specslist.length == 0) {
    //   this.getSpecs();
    // }
    console.log("挂载了。。。。");
  },
  props: ["dialogInfo"],
  methods: {
    //封装一个打开弹框触发的事件
    openEvent() {
      console.log("弹框已打开。。。。");
    },
    //封装一个切换一级分类获取二级分类的事件
    changeCate(n) {
      let index = this.secklist.findIndex(
        (item) => item.id == this.seckInfo.first_cateid
      );
      this.secondArr = this.secklist[index].children;
      if (!n) {
        this.seckInfo.second_cateid = "";
      }
    },
    changeSpecs(n) {
      let index = this.secklist.findIndex(
        (item) => item.id == this.seckInfo.specsid
      );
      this.specsArr = this.secklist[index].attrs;
      if (!n) {
        this.seckInfo.specsattr = [];
      }
    },
    ...mapActions({
      getSeck: "seck/getSeckListAction",
      // getSpecs: "specs/getSpecsListAction",
    }),
    },
    
    ...mapActions({
      getSeckList: "seck/getSeckListAction",
    }),
    //封装一个取消事件
    cancel() {
      //去改变父组件的isShow的状态
      this.$emit("cancel", false);
      //调取清空事件
      this.reset();
    },
    //封装一个清空事件
    reset() {
      this.seckInfo = {
        first_cateid: "", //一级分类编号
        second_cateid: "", //二级分类编号
        id:0,  //编号，必填项
        title:"",  //限时秒杀名称
        begintime:"",  //开始时间
        endtime:"",  //结束时间
        goodsid:"",  //商品编号
        status: 1, //状态1正常2禁用
      };
      //调用清空验证的方法
      this.$refs.seckInfo.resetFields();
      this.fileList = [];
    },
    //封装一个查询一条数据的接口
    lookup(id) {
      getSeckInfo({ id }).then((res) => {
        if (res.code == 200) {
          this.seckInfo = res.list;
          this.seckInfo.id = id;
          //针对于规格属性值进行数据格式转化，后端提供的是字符串，我们需要数组
          this.seckInfo.specsattr = this.seckInfo.specsattr.split(",");
          this.changeSeck(true);
          // this.changeSpecs(true);
    
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //封装一个确定事件
    confirm() {
      this.$refs.seckInfo.validate((valid) => {
        if (valid) {
          //商品的规格属性需要字符串格式，而目前我们的数据格式是[],对入参进行数据格式转化
          this.seckInfo.specsattr = this.seckInfo.specsattr.join(",");
          // this.seckInfo.description = this.editor.txt.html()
          if (this.dialogInfo.isAdd) {
            // console.log(this.editor.txt.html(),'富文本编辑器的内容');
            // console.log(this.goodsInfo,'商品的表单');
            getSeckAdd(this.seckInfo).then((res) => {
              if (res.code == 200) {
                this.cancel();
                this.getSeckList();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            getSeckEdit(this.seckInfo).then((res) => {
              if (res.code == 200) {
                this.cancel();
                this.getSeckList();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
};
</script>

<style scoped></style>
